import React, { useState, useEffect } from 'react';
import { Calendar, Clock, MapPin, Sun, Cloud, CloudRain, Navigation, Camera, Utensils } from 'lucide-react';
import Map from '../components/Map';
import NavigationLinks from '../components/NavigationLinks';

interface ItineraryDay {
  day: number;
  date: string;
  theme: string;
  weather_plan: string;
  total_duration: string;
  total_steps: string;
  activities: Activity[];
}

interface Activity {
  time: string;
  activity: string;
  location: string;
  duration: string;
  description: string;
  transport: string;
  cost: string;
  tips: string;
  photo_spots?: string[];
  recommended_food?: string[];
}

const Home: React.FC = () => {
  const [itinerary, setItinerary] = useState<{ days: ItineraryDay[] } | null>(null);
  const [selectedDay, setSelectedDay] = useState(1);
  const [weather, setWeather] = useState<'sunny' | 'cloudy' | 'rainy'>('sunny');
  const [showNavigation, setShowNavigation] = useState(false);
  const [selectedRoute, setSelectedRoute] = useState<{
    start: { name: string; lat: number; lng: number };
    end: { name: string; lat: number; lng: number };
  } | null>(null);

  // 加载行程数据
  useEffect(() => {
    const loadItinerary = async () => {
      try {
        const response = await fetch('/src/data/itinerary.json');
        const data = await response.json();
        setItinerary(data.itinerary);
      } catch (error) {
        console.error('加载行程数据失败:', error);
      }
    };
    loadItinerary();
  }, []);

  // 获取天气图标
  const getWeatherIcon = (weatherType: string) => {
    switch (weatherType) {
      case 'sunny': return <Sun className="text-yellow-500" size={20} />;
      case 'cloudy': return <Cloud className="text-gray-500" size={20} />;
      case 'rainy': return <CloudRain className="text-blue-500" size={20} />;
      default: return <Sun className="text-yellow-500" size={20} />;
    }
  };

  // 获取活动图标
  const getActivityIcon = (activity: string) => {
    if (activity.includes('游览') || activity.includes('参观')) {
      return <MapPin className="text-red-500" size={16} />;
    } else if (activity.includes('餐') || activity.includes('食')) {
      return <Utensils className="text-green-500" size={16} />;
    } else if (activity.includes('拍照') || activity.includes('摄影')) {
      return <Camera className="text-orange-500" size={16} />;
    } else {
      return <Clock className="text-blue-500" size={16} />;
    }
  };

  // 处理导航请求
  const handleNavigation = (startLocation: string, endLocation: string) => {
    // 这里应该根据实际的POI数据获取坐标
    const locationCoords: { [key: string]: { lat: number; lng: number } } = {
      '南京南站': { lat: 31.9555, lng: 118.7134 },
      '总统府': { lat: 32.042578, lng: 118.796877 },
      '南京博物院': { lat: 32.041851, lng: 118.832977 },
      '老门东历史街区': { lat: 32.031234, lng: 118.789456 },
      '夫子庙': { lat: 32.034567, lng: 118.788123 },
      '玄武湖公园': { lat: 32.067890, lng: 118.787456 },
      '中山陵': { lat: 32.067778, lng: 118.843333 },
      '明孝陵': { lat: 32.058889, lng: 118.826667 }
    };

    const start = locationCoords[startLocation] || { lat: 32.0503, lng: 118.7969 };
    const end = locationCoords[endLocation] || { lat: 32.0503, lng: 118.7969 };

    setSelectedRoute({
      start: { name: startLocation, ...start },
      end: { name: endLocation, ...end }
    });
    setShowNavigation(true);
  };

  if (!itinerary) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">正在加载南京旅游攻略...</p>
        </div>
      </div>
    );
  }

  const currentDay = itinerary.days.find(day => day.day === selectedDay);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* 头部标题 */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="text-center">
            <h1 className="text-4xl font-bold text-gray-900 mb-2">
              南京2日精华游
            </h1>
            <p className="text-xl text-gray-600 mb-4">
              探索六朝古都，品味金陵文化
            </p>
            <div className="flex items-center justify-center space-x-6 text-sm text-gray-500">
              <div className="flex items-center space-x-1">
                <Calendar size={16} />
                <span>2024年3月15-16日</span>
              </div>
              <div className="flex items-center space-x-1">
                <Clock size={16} />
                <span>2天1夜</span>
              </div>
              <div className="flex items-center space-x-1">
                {getWeatherIcon(weather)}
                <span>适宜出行</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-full mx-auto px-6 py-8">
        <div className="grid grid-cols-1 xl:grid-cols-5 gap-8">
          {/* 左侧：行程安排 */}
          <div className="xl:col-span-3 space-y-6">
            {/* 天数选择 */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-2xl font-bold text-gray-800">行程安排</h2>
                <div className="flex space-x-2">
                  {itinerary.days.map(day => (
                    <button
                      key={day.day}
                      onClick={() => setSelectedDay(day.day)}
                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                        selectedDay === day.day
                          ? 'bg-blue-600 text-white'
                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                      }`}
                    >
                      第{day.day}天
                    </button>
                  ))}
                </div>
              </div>

              {currentDay && (
                <div>
                  <div className="mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg">
                    <h3 className="text-lg font-semibold text-gray-800 mb-2">
                      {currentDay.theme}
                    </h3>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                      <div className="flex items-center space-x-2">
                        <Calendar size={16} className="text-blue-600" />
                        <span>{currentDay.date}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Clock size={16} className="text-green-600" />
                        <span>{currentDay.total_duration}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <MapPin size={16} className="text-red-600" />
                        <span>{currentDay.total_steps}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        {getWeatherIcon(weather)}
                        <span>{currentDay.weather_plan}</span>
                      </div>
                    </div>
                  </div>

                  {/* 活动时间轴 */}
                  <div className="space-y-4">
                    {currentDay.activities.map((activity, index) => (
                      <div key={index} className="flex space-x-4">
                        <div className="flex flex-col items-center">
                          <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                            {getActivityIcon(activity.activity)}
                          </div>
                          {index < currentDay.activities.length - 1 && (
                            <div className="w-0.5 h-16 bg-gray-200 mt-2"></div>
                          )}
                        </div>
                        <div className="flex-1 pb-8">
                          <div className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                            <div className="flex items-center justify-between mb-2">
                              <h4 className="font-semibold text-gray-800">
                                {activity.time} - {activity.activity}
                              </h4>
                              <span className="text-sm text-gray-500">
                                {activity.duration}
                              </span>
                            </div>
                            <p className="text-gray-600 mb-2">{activity.description}</p>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                              <div>
                                <span className="font-medium text-gray-700">地点:</span>
                                <span className="ml-1 text-gray-600">{activity.location}</span>
                              </div>
                              <div>
                                <span className="font-medium text-gray-700">交通:</span>
                                <span className="ml-1 text-gray-600">{activity.transport}</span>
                              </div>
                              <div>
                                <span className="font-medium text-gray-700">费用:</span>
                                <span className="ml-1 text-gray-600">{activity.cost}</span>
                              </div>
                              <div className="md:col-span-1">
                                <button
                                  onClick={() => handleNavigation(activity.location, currentDay.activities[index + 1]?.location || activity.location)}
                                  className="flex items-center space-x-1 text-blue-600 hover:text-blue-800 transition-colors"
                                >
                                  <Navigation size={14} />
                                  <span>导航</span>
                                </button>
                              </div>
                            </div>
                            {activity.tips && (
                              <div className="mt-3 p-2 bg-yellow-50 border-l-4 border-yellow-400 rounded">
                                <p className="text-sm text-yellow-800">
                                  <span className="font-medium">贴士:</span> {activity.tips}
                                </p>
                              </div>
                            )}
                            {activity.recommended_food && (
                              <div className="mt-2">
                                <span className="text-sm font-medium text-gray-700">推荐美食:</span>
                                <div className="flex flex-wrap gap-1 mt-1">
                                  {activity.recommended_food.map((food, idx) => (
                                    <span key={idx} className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">
                                      {food}
                                    </span>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* 右侧：地图和导航 */}
          <div className="xl:col-span-2 space-y-6">
            {/* 地图 */}
            <div className="bg-white rounded-lg shadow-md overflow-hidden">
              <div className="p-4 border-b">
                <h3 className="font-bold text-lg text-gray-800">景点地图</h3>
              </div>
              <div className="h-[600px] lg:h-[700px]">
                <Map className="w-full h-full" />
              </div>
            </div>

            {/* 导航面板 */}
            {showNavigation && selectedRoute && (
              <NavigationLinks
                startPoint={selectedRoute.start}
                endPoint={selectedRoute.end}
                className=""
              />
            )}

            {/* 快速信息 */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="font-bold text-lg text-gray-800 mb-4">旅行贴士</h3>
              <div className="space-y-3 text-sm">
                <div className="flex items-start space-x-2">
                  <MapPin size={16} className="text-red-500 mt-0.5" />
                  <div>
                    <p className="font-medium">总预算</p>
                    <p className="text-gray-600">400-600元/人</p>
                  </div>
                </div>
                <div className="flex items-start space-x-2">
                  <Clock size={16} className="text-blue-500 mt-0.5" />
                  <div>
                    <p className="font-medium">最佳时间</p>
                    <p className="text-gray-600">春秋两季，避开节假日</p>
                  </div>
                </div>
                <div className="flex items-start space-x-2">
                  <Camera size={16} className="text-orange-500 mt-0.5" />
                  <div>
                    <p className="font-medium">必备物品</p>
                    <p className="text-gray-600">舒适步行鞋、充电宝、身份证</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;